@import "../../Common/commonStyle.scss";

.commonLoginBg-box {

    h1,
    p {
        margin: 0;
        padding: 0;
    }

    width: 100%;
    height: 100vh;
    background: url('../../Assets/header/web_01@2x.png') 0 0 no-repeat,
    url('../../Assets/header/web_02@2x.png') 0 11.11vw no-repeat,
    url('../../Assets/header/web_03@2x.png') 0 22vw no-repeat,
    url('../../Assets/header/web_04@2x.png') 0 33vw no-repeat,
    url('../../Assets/header/web_05@2x.png') 0 44vw no-repeat;
    background-size: 100%;
    background-color: #13152C;
    overflow: hidden;
    position: relative;

    .logo {
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        color: rgba(255, 255, 255, 1);

        div {
            p:nth-child(1) {

                font-family: $PingFangSC-Semibold-fontFamily;
            }

            p:nth-child(2) {
                font-family: $PingFang-SC-Bold-fontFamily;
            }
        }


    }

    // 头部与内容间线条样式
    .banner-line {
        position: absolute;
        width: 100%;
        height: 100*0.31vw;
        bottom: -10%;
        background-image: url('../../Assets/header/line@2x.png');
        background-repeat: no-repeat;
        background-size: cover;
        animation: bannerLine 5s linear infinite;
        z-index: 0;
    }

    .contact-us {
        position: absolute;
        text-align: center;

        &-txt {
            position: relative;
            animation: contact_Us 3s linear infinite alternate;
            font-family: $PingFang-SC-Medium-fontFamily;
            color: rgba(255, 255, 255, 1);
        }

        &-base {
            position: relative;

            .adorn {
                position: absolute;
                animation: adorn 5s linear infinite;
            }
        }
    }

    .commonLoginBg-cnt {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}



@media screen and(max-width: 1440px) {
    .commonLoginBg-box {
        .logo {
            left: 29px;
            top: 29px;

            img {
                width: 50px;
                height: 50px;
            }

            div {
                margin-left: 14px;

                p:nth-child(1) {
                    font-size: 27px;
                    font-weight: 600;
                    line-height: 38px;
                    text-shadow: 0px 2px 8px rgba(0, 205, 245, 0.55);
                }

                p:nth-child(2) {
                    font-size: 12px;
                    font-weight: bold;
                    line-height: 16px;
                    text-shadow: 0px 2px 8px rgba(0, 205, 245, 0.8);
                }

            }
        }

        .contact-us {
            bottom: 35px;
            left: 45px;

            &-txt {
                font-size: 12px;
                font-weight: 500;
                line-height: 17px;
                text-shadow: 0px 2px 7px rgba(0, 205, 245, 0.64);
            }

            &-base {
                .adorn {
                    width: 35px;
                    top: -25px;
                    left: 40px;
                }

                .base {
                    width: 90px;
                }
            }
        }
    }
}

@media screen and(min-width: 1441px)and(max-width: 1920px) {
    .commonLoginBg-box {
        .logo {
            left: 38px;
            top: 39px;

            img {
                width: 60px;
                height: 60px;
            }

            div {
                margin-left: 18px;

                p:nth-child(1) {
                    position: relative;
                    top: -5px;

                    font-size: 36px;
                    font-weight: 600;
                    line-height: 50px;
                    text-shadow: 0px 2px 10px rgba(0, 205, 245, 0.55);

                }

                p:nth-child(2) {

                    font-size: 15px;
                    font-weight: bold;
                    line-height: 21px;
                    text-shadow: 0px 2px 10px rgba(0, 205, 245, 0.8);
                }

            }
        }

        .contact-us {
            bottom: 35px;
            left: 45px;

            &-txt {
                font-size: 12px;
                font-weight: 500;
                line-height: 17px;
                text-shadow: 0px 2px 7px rgba(0, 205, 245, 0.64);
            }

            &-base {
                .adorn {
                    width: 35px;
                    top: -25px;
                    left: 40px;
                }

                .base {
                    width: 90px;
                }
            }
        }
    }
}

@keyframes contact_Us {
    0% {
        top: 0;
        // opacity: 0;
    }

    50% {
        top: 10px;
        // opacity: 1;
    }

    100% {
        top: 20px;
        // opacity: 0;
    }
}

@keyframes bannerLine {
    0% {
        bottom: -10%;
        opacity: 0;
    }

    50% {
        bottom: 0%;
        opacity: 1;
    }

    100% {
        bottom: 10%;
        opacity: 0;
    }
}


@keyframes adorn {
    0% {
        top: -25px;
        opacity: 0;
    }

    50% {
        top: -35px;
        opacity: .6;
    }

    100% {
        top: -50px;
        opacity: 0;
    }
}